<template>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="content">
      <div class="slider">
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
          <van-swipe-item
            v-for="sliderItem in sliderItems"
            :key="sliderItem.id"
            @click="toRead(sliderItem.blink)"
          >
            <div>
              <div class="text">
                {{ sliderItem.title }}
              </div>
              <img class="sliderImg" :src="sliderItem.img" alt="" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <van-list
        v-model:loading="loading"
        finished-text="没有更多了"
        :finished="finished"
        @load="onLoad"
      >
        <div class="main" >
          <div class="containner" v-for="item in list" :key="item.bvid" >
            <div @click="toDetail(item.bvid)">
              <div class="img">
                <img :src="item.pic" />
              </div>
              <div class="watchmsg">
                <div class="watch">
                  <van-icon name="play-circle-o" />{{
                    item.stat.view
                  }}&nbsp;&nbsp;
                </div>
                <div class="danmaku">
                  <van-icon name="coupon-o" />{{ item.stat.danmaku }}
                </div>
              </div>
            </div>
            <div class="title" @click="toDetail(item.bvid)">
              {{ item.title }}
            </div>
            <div class="footer">
              <div class="owner">
                <van-icon name="manager-o" />&nbsp;{{ item.owner.name }}
              </div>
              <div class="more" @click="doMore">...</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </van-pull-refresh>
  <van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
>
 <div class="chooseTitle">
   我不想看(选择后减少相关推荐)
   <div class="chooseItem">
     <div class="item1" @click="noMore">推荐过</div>
     <div class="item2" @click="noMore">不感兴趣</div>
   </div>
 </div>
</van-popup>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getSeller, getSlider } from "@/api/index.js";
import { useRouter } from 'vue-router'
import { Toast } from 'vant';

const router = useRouter()
const views = ref([])
const list = ref([]);
const x = ref(8)
const sliderItems = ref([]);
const loading = ref(false);
const finished = ref(false);
 const show = ref(false);


//下拉刷新
const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
    x.value = 8
    finished.value = false
    load();
  }, 1000);
};

const load = async () => {
  //获取滑块内容
  getSlider().then((res) => {
    // console.log(res);
    sliderItems.value = res;
  });

  //获取列表
  getSeller().then((res) => {
    
    // console.log(res.data.archives);
    // this.seller = seller
    views.value = res.data.archives;
    list.value = views.value.slice(0,8)
    // console.log(list.value);
  });
};

//滑块跳转
const toRead = (blink) => {
  // console.log(blink);
  window.location.href = blink
}
//触底事件
const onLoad = () => {
  list.value = views.value.slice(0, x.value)
  x.value = x.value + 8
  loading.value = false;
  if(list.value.length >= 50) {
    finished.value = true
  }
};
//跳转详情页
const toDetail = (bvid) => {
  router.push({path:'/detail', query:{ Bvid: bvid } })
}
//更多操作
const doMore = () => {
 show.value = true
}
//减少推荐
const noMore = () => {
  show.value = false
  Toast.success('已为您减少此类推送！');
}
onMounted(() => {
  load()
});
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  width: 100%;
  height: 200px;
}
.content{
  margin-bottom: 50px;
}
.sliderImg {
  image-rendering: auto;
  width: 100%;
  height: 200px;
}
.text {
  position: absolute;
  margin-top: 110px;
  margin-left: 20px;
  color: #39a9ed;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main {
  display: flex;
  width: 97%;
  flex-wrap: wrap;
  /* padding: 10px 10px 0 10px; */
  justify-content: space-between;
  /* background-color: rgba(238, 242, 246); */
}
.containner {
  width: 165px;
  height: 140px;
  margin: 10px 0 0 3%;
  border: 1px solid #aaa;
  background-color: rgba(255, 255, 255);
  border-radius: 10px;
}
.img img {
  width: 165px;
  height: 103px;
  border-radius: 10px;
}
.watchmsg {
  position: relative;
  display: flex;
  margin-top: -15%;
  margin-left: 4px;
  color: #000;
}
.footer {
  display: flex;
  justify-content: space-between;
  color: #aaa;
}
.title {
  margin-top: 2px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.owner {
  font-size: 12px;
  margin-left: 5px;
}
.more {
  margin-right: 4px;
}
.chooseTitle{
  font-size: 16px;
  margin-top: 20px;
  margin-left: 10px;
}
.chooseItem{
  display: flex;
  margin-top: 30px;
  margin-left: 40px;
  width: 280px;
  justify-content: space-between;
}
.item1, .item2{
  height: 25px;
  width: 80px;
  text-align: center;
  border: 1px solid #aaa;
}
</style>